﻿<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />



    <link rel="stylesheet" href="../content/css/font.css">
    <link rel="stylesheet" href="../content/css/xadmin.css">
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' href='../content/plugin/bootstrap/css/style.css' />

    <script src="../content/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="../content/js/xadmin.js"></script>
    <script type="text/javascript" src="../content/js/md5.min.js"></script>
    <script type="text/javascript" src="../content/js/cookie.js"></script>
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../content/plugin/FileUpload/css/jquery.fileupload.css" />




</head>

<body>
    <div id="app">
        <div class="x-nav">

            <span class="nav-header">
                <a href="">首页</a>>
                <a href="">商品管理</a>>
                <a>
                    <cite>商品修改</cite>
                </a>
            </span>

        </div>
        <div class="x-body">


            <div class="content-inner">


                <!-- Forms Section-->
                <section class="forms">
                    <div class="container-fluid">
                        <div class="row">
                            <!-- Basic Form-->
                            <div class="col-lg-12">
                                <div class="card">

                                    <div class="card-body">

                                        <form class="form-horizontal">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    基本信息
                                                </div>
                                                <div class="panel-body">
                                                    <div class="form-group">
                                                        <label for="firstname"
                                                            class="col-sm-2 control-label">商品名称</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control"
                                                                v-model="addobj.goods_name" placeholder="请输入名字">
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="lastname"
                                                            class="col-sm-2 control-label">商品图片(749*792)</label>
                                                        <div class="col-sm-10">
                                                            <button type="button" @click="chooseimage"
                                                                class="btn btn-default">选择</button>
                                                            <div style="    margin-top: 10px;">
                                                                <li v-for="uitem in imglist"
                                                                    style="float: left;margin-left: 10px;"
                                                                    draggable="true"
                                                                    @dragstart="handleDragStart($event, uitem)"
                                                                    @dragover.prevent="handleDragOver($event, uitem)"
                                                                    @dragenter="handleDragEnter($event, uitem)"
                                                                    @dragend="handleDragEnd($event, uitem)">
                                                                    <img :src="uitem.file_name" draggable="false"
                                                                        @dblclick="delimg(uitem)" style="width: 50px;height: 50px; object-fit: cover;
                                                                        " />
                                                                </li>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    规格/库存
                                                </div>
                                                <div class="panel-body">

                                                    <div class="row">

                                                        <div class="col-sm-4">


                                                            <div class="form-group">
                                                                <label for="firstname"
                                                                    class="col-sm-4 control-label">商品规格</label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control" v-model="
                                                                    guigeobj.spec_value" placeholder="">
                                                                </div>
                                                            </div>

                                                            <div class="form-group">
                                                                <label for="lastname"
                                                                    class="col-sm-4 control-label">商品价格</label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control" v-model="
                                                                    guigeobj.goods_price" placeholder="">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="lastname"
                                                                    class="col-sm-4 control-label">商品划线价</label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control"
                                                                        v-model="guigeobj.line_price" placeholder="">
                                                                </div>
                                                            </div>




                                                            <p style="text-align: center;">
                                                                <a @click="add" class="btn btn-default">添加</a>
                                                            </p>


                                                        </div>
                                                        <div class="col-sm-8">

                                                            <table class="table table-bordered table-hover">
                                                                <thead>
                                                                    <tr>
                                                                        <th>图片</th>

                                                                        <th>规格名称</th>

                                                                        <th> 商品价格</th>
                                                                        <th> 商品划线价</th>



                                                                        <th>操作</th>

                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr v-for="uitem in guigelist">

                                                                        <td>
                                                                            <img :src="uitem.imgurl"
                                                                                @click="chooseimg(uitem)"
                                                                                style="width:50px;height: 50px;" />

                                                                        </td>

                                                                        <td>

                                                                            <input type="text" class="form-control"
                                                                                v-model="
                                                                                uitem.spec_value" placeholder="">
                                                                        </td>

                                                                        <td>
                                                                            <input type="text" class="form-control"
                                                                                v-model="
                                                                                uitem.goods_price" placeholder="">
                                                                        </td>
                                                                        <td>
                                                                            <input type="text" class="form-control"
                                                                                v-model="uitem.line_price"
                                                                                placeholder="">
                                                                        </td>


                                                                        <td class="td-manage" style="width: 100px;">


                                                                            <a title="删除" v-on:click="delitem(uitem)"
                                                                                href="javascript:;">
                                                                                <i class="layui-icon">&#xe640;</i>
                                                                            </a>
                                                                            <a title="保存" v-on:click="saveitem(uitem)"
                                                                                href="javascript:;">
                                                                                保存
                                                                            </a>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

                                                        </div>

                                                    </div>





                                                </div>
                                            </div>

                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    商品详情
                                                </div>
                                                <div class="panel-body">
                                                    <div class="form-group">
                                                        <label for="firstname"
                                                            class="col-sm-2 control-label">商品详情</label>
                                                        <div class="col-sm-10">
                                                            <textarea rows="2" name="img_desc_add"
                                                                ng-model="addobj.img_desc" cols="30" ng-model="value"
                                                                class="form-control" placeholder="图文详情"></textarea>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    其他
                                                </div>
                                                <div class="panel-body">

                                                    <div class="form-group">
                                                        <label for="lastname"
                                                            class="col-sm-2 control-label">商品状态</label>
                                                        <div class="col-sm-10">
                                                            <select v-model="addobj.goods_status" class="form-control">
                                                                <option value="">
                                                                    请选择
                                                                </option>
                                                                <option v-for="item in statelist" :value='item.id'>
                                                                    {{item.name}}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="lastname"
                                                            class="col-sm-2 control-label">初始销量</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control"
                                                                v-model="addobj.sales_initial" placeholder="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="lastname" class="col-sm-2 control-label">商品排序
                                                        </label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control"
                                                                v-model="addobj.goods_sort" placeholder="">
                                                        </div>
                                                    </div>

                                                </div>



                                                <div class="form-group">
                                                    <div class="col-sm-offset-2 col-sm-10">
                                                        <a @click="insert" class="btn btn-default">提交</a>
                                                    </div>
                                                </div>
                                        </form>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>
                </section>

            </div>
        </div>


    </div>





    </div>
    <link href="../content/plugin/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="../content/plugin/sweetalert/sweetalert.min.js"></script>
    <script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../content/js/vue2.js"></script>
    <script src="../content/js/vue-nav.js"></script>
    <script src="../content/js/config.js"></script>
    <link rel="stylesheet" href="../content/kindeditor/themes/default/default.css" />
    <script charset="utf-8" src="../content/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="../content/kindeditor/lang/zh_CN.js"></script>

    <script>

        var editor_add;

        KindEditor.ready(function (K) {
            editor_add = K.create('textarea[name="img_desc_add"]', {
                width: '300px',
                allowFileManager: false,
                uploadJson: "/upload/file2"
            });

        });

        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        var vm = new Vue({
            el: "#app",
            data: {
                all: 0,
                search: {
                    page: 1,
                    size: 10
                },
                arrayData: [],
                allcount: 0,
                imglist: [],
                addobj: {
                    typename: "",
                    deduct_stock_type: "",
                    delivery_id: "0",
                    goods_status: "1"
                },
                editobj: {},
                datalist: [],
                yunfeilist: [{ "id": "0", "name": "包邮" }, { "id": "1", "name": "不包邮" }],
                deductlist: [{ "id": 1, "name": "下单减库存" }, { "id": 2, "name": "付款减库存" }],
                statelist: [{ "id": "1", "name": "上架" }, { "id": "0", "name": "下架" }],
                typelist: [],
                typelist2: [],
                brandlist: [],
                guigelist: [],
                guigeobj: {},
                temp: {},
                dragging: null
            },
            components: {
                'vue-nav': Vnav
            },
            methods: {
                handleDragStart(e, item) {
                    this.dragging = item;
                },
                handleDragEnd(e, item) {
                    this.dragging = null
                },
                //首先把div变成可以放置的元素，即重写dragenter/dragover
                handleDragOver(e) {
                    e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
                },
                handleDragEnter(e, item) {
                    e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
                    if (item === this.dragging) {
                        return
                    }
                    const newItems = [...this.imglist]
                    console.log(newItems)
                    const src = newItems.indexOf(this.dragging)
                    const dst = newItems.indexOf(item)

                    newItems.splice(dst, 0, ...newItems.splice(src, 1))

                    console.log("ss", newItems);

                    this.imglist = newItems

                    $.post(apiurl + "/admin/goods/paixu", { data: JSON.stringify(newItems) }, function (data) {

                    });




                },
                searchdata: function () {
                    this.search.page = 1;
                    this.getdata();
                },
                choosetype: function (uitem) {
                    this.addobj.typename = uitem.name;
                    this.addobj.category_id = uitem.id;
                },
                choosebrand: function (uitem) {
                    this.addobj.brandname = uitem.name;
                    this.addobj.brandid = uitem.id
                },

                add: function () {

                    var that = this;
                    that.guigeobj.goods_id = this.addobj.id;
                    $.post(apiurl + "/admin/goods/goods_spec/add", that.guigeobj, function (data) {
                        console.log("data", data);
                        if (data.status == 200) {
                            that.guigelist.push(that.guigeobj);
                            that.guigeobj = {};
                        } else {
                            layer.msg("商品编码不能为空，不能重复");
                        }
                    });

                },
                delitem: function (uitem) {
                    this.guigelist.remove(uitem);
                    $.post(apiurl + "/admin/goods/goods_spec/del", { id: uitem.id }, function (data) {
                        console.log("data", data);
                    });
                },
                saveitem(uitem) {

                    $.post(apiurl + "/admin/goods/goods_spec/edit", uitem, function (data) {
                        console.log("data", data);
                        if (data.status == 200) {
                            layer.msg("保存成功")
                        } else {
                            layer.msg("商品编码不能为空，不能重复");
                        }
                    });
                },
                chooseimage: function () {

                    x_admin_show('选择图片', '../components/imagelist.html?goods_id=' + this.addobj.id, 800, 620)
                },
                chooseimg(uitem) {
                    this.temp = uitem;
                    x_admin_show('选择图片', '../components/image.html', 800, 620)
                },
                insert: function () {
                    var self = this;
                    this.addobj.content = editor_add.html();
                    this.addobj.imglist = JSON.stringify(this.imglist);

                    if (this.guigelist.length == 0) {
                        layer.msg("请添加规格信息");
                        return;
                    }
                    this.addobj.guigelist = JSON.stringify(this.guigelist);

                    $.post(apiurl + "/admin/goods/edit", this.addobj, function (data) {
                        if (data.status == 200) {
                            $("#addbox").modal('hide');
                            swal("success", "修改成功", "success");

                            location.href = "index.html?page=" + GetRequest("page");
                        } else {
                            swal("系统提示", data.message, "error");
                        }

                    });
                },
                getinfo: function () {
                    var id = GetRequest("id");
                    var self = this;
                    $.post(apiurl + "/admin/goods/info", { id: id, mid: json.mid }, function (data) {
                        if (data.status == 200) {
                            self.addobj = data.data;
                            editor_add.html(data.data.content);
                            if (data.data.imglist != "") {
                                self.imglist = data.data.imglist;

                            }
                            self.guigelist = data.data.guigelist;

                        }

                    });
                },
                gettype: function () {  //查询数据

                    var self = this;
                    $.post(apiurl + "/admin/category/tree", { type: 2 }, function (_result) {
                        console.log(_result);
                        self.typelist = _result.data;

                    });

                },
                gettype2: function () {  //互动分类

                    var self = this;
                    $.post(apiurl + "/admin/category/list", { type: 1 }, function (_result) {
                        console.log(_result);
                        self.typelist2 = _result.data;

                    });

                },
                gettype3: function () {  //查询数据

                    var self = this;
                    $.post(apiurl + "/admin/category/tree", { type: 3 }, function (_result) {
                        console.log(_result);
                        self.brandlist = _result.data;

                    });

                },
                delimg: function (uitem) {
                    this.imglist.remove(uitem);

                    $.post(apiurl + "/admin/goods/image/del", { id: uitem.id }, function (data) {
                        console.log("data", data);
                    });
                }


            },
            created: function () {  //初始化事件里边去调用查询方法
                this.gettype("");

                this.gettype2();
                this.gettype3();
                this.getinfo("");

            }
        });


        function setimg(arr) {
            console.log("arr", arr);


            for (var i = 0; i < arr.length; i++) {
                vm.$data.imglist.push(arr[i]);
            }

        }

        function setimage(imgurl) {
            console.log("imgurl", imgurl);
            vm.$data.temp.imgurl = imgurl;
            vm.$forceUpdate();
        }
    </script>
</body>

</html>